import { useState } from 'react'
import { Button, Input } from '@lib-design/ui-components'
import { add, subtract, multiply, divide } from '@lib-design/math-utils'
import { mean, median, standardDeviation } from '@lib-design/math-utils'
import { round } from '@lib-design/math-utils'
import './App.css'

function App() {
  const [inputValue, setInputValue] = useState('')
  const [num1, setNum1] = useState<string>('')
  const [num2, setNum2] = useState<string>('')
  const [result, setResult] = useState<number | null>(null)
  const [numbers, setNumbers] = useState<number[]>([])

  const handleCalculate = (operation: 'add' | 'subtract' | 'multiply' | 'divide') => {
    const n1 = parseFloat(num1)
    const n2 = parseFloat(num2)
    
    if (isNaN(n1) || isNaN(n2)) {
      alert('Please enter valid numbers')
      return
    }

    let calculatedResult: number
    switch (operation) {
      case 'add':
        calculatedResult = add(n1, n2)
        break
      case 'subtract':
        calculatedResult = subtract(n1, n2)
        break
      case 'multiply':
        calculatedResult = multiply(n1, n2)
        break
      case 'divide':
        if (n2 === 0) {
          alert('Cannot divide by zero')
          return
        }
        calculatedResult = divide(n1, n2)
        break
    }
    setResult(round(calculatedResult, 2))
  }

  const handleAddToStats = () => {
    if (result !== null) {
      setNumbers([...numbers, result])
    }
  }

  const calculateStats = () => {
    if (numbers.length === 0) return null
    return {
      mean: round(mean(numbers), 2),
      median: round(median(numbers), 2),
      stdDev: round(standardDeviation(numbers), 2)
    }
  }

  const stats = calculateStats()

  return (
    <div className="container">
      <h1>Math Utils Demo</h1>

      <section className="demo-section">
        <h2>Basic Calculator</h2>
        <div style={{ display: 'flex', gap: '10px', marginBottom: '10px' }}>
          <Input
            value={num1}
            onChange={(e) => setNum1(e.target.value)}
            placeholder="First number"
            type="number"
          />
          <Input
            value={num2}
            onChange={(e) => setNum2(e.target.value)}
            placeholder="Second number"
            type="number"
          />
        </div>
        <div className="button-group">
          <Button onClick={() => handleCalculate('add')} variant="primary">
            Add (+)
          </Button>
          <Button onClick={() => handleCalculate('subtract')} variant="primary">
            Subtract (-)
          </Button>
          <Button onClick={() => handleCalculate('multiply')} variant="primary">
            Multiply (×)
          </Button>
          <Button onClick={() => handleCalculate('divide')} variant="primary">
            Divide (÷)
          </Button>
        </div>
        {result !== null && (
          <div style={{ marginTop: '10px' }}>
            <p>Result: {result}</p>
            <Button onClick={handleAddToStats} variant="secondary">
              Add to Statistics
            </Button>
          </div>
        )}
      </section>

      <section className="demo-section">
        <h2>Statistics</h2>
        {stats ? (
          <div>
            <p>Numbers: {numbers.join(', ')}</p>
            <p>Mean: {stats.mean}</p>
            <p>Median: {stats.median}</p>
            <p>Standard Deviation: {stats.stdDev}</p>
          </div>
        ) : (
          <p>Add some numbers to see statistics</p>
        )}
        <Button 
          onClick={() => setNumbers([])} 
          variant="secondary"
          style={{ marginTop: '10px' }}
        >
          Clear Statistics
        </Button>
      </section>
    </div>
  )
}

export default App